import React, { forwardRef, useState, useEffect } from 'react'
import { Form, Input, Select } from "antd"
const { Option } = Select;
const UserForm = forwardRef((props, ref) => {
    const [isVasiable, setIsvasiable] = useState(false)
    // console.log(ref);
    // console.log(props.isUpdate);
    // 控制区域
    useEffect(() => {
        setIsvasiable(props.isUpdate)
    }, [props.isUpdate])
    return (
        <Form layout='vertical'
            ref={ref}>
            <Form.Item label="用户名"
                name="username"
                rules={[{ required: true, message: '请输入用户名！！' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item label="密码"
                name="password"
                rules={[{ required: true, message: '请输入密码！！' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item name="region" label="区域" rules={isVasiable ? [] : [{ required: true }]} >
                <Select
                    placeholder=""
                    allowClear
                    disabled={isVasiable}
                >
                    {
                        props.regionList.map(item => {
                            return <Option value={item.value} key={item.id}>{item.title}</Option>
                        })
                    }
                </Select>
            </Form.Item>
            <Form.Item name="roleId" label="角色" rules={[{ required: true }]}>
                <Select
                    placeholder=""
                    allowClear
                    onChange={(value) => {
                        if (value === 1) {
                            setIsvasiable(true)
                            ref.current.setFieldsValue({
                                region: ""
                            })
                        } else {
                            setIsvasiable(false)
                        }
                    }}
                >
                    {
                        props.roleList.map(item => {
                            return <Option value={item.id} key={item.id}>{item.roleName}</Option>
                        })
                    }
                </Select>
            </Form.Item>
        </Form>
    )
})

export default UserForm